<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>ZUI -表单验证控件</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
    <link rel="stylesheet" type="text/css" href="css/form.css">
    <link rel="stylesheet" type="text/css" href="css/button.css">
    <link rel="stylesheet" type="text/css" href="css/validate.css">
    <link rel="stylesheet" type="text/css" href="css/demo.css">
    <script src="libs/zepto.all.js"></script>
    <script type="text/javascript" src="js/zepto-mvalidate.js"></script>
    
</head>
<body class="demo-bgf2f2f2">
    <header class="zui-header">
        <i class="zicon-goback icon-fanhui" onClick="javascript :history.back(-1);"></i>
        <h1 class="title">表单验证控件</h1>
    </header>
    <div class="demo-hd-1 ml10 mr10">验证类型1</div>
    <div class="zui-mr10 zui-mb10 zui-ml10 demo-bgfff pd10">
        <form class="zform zform-radius" action="https://www.wnworld.com" id="form1">
                <fieldset class="zform-fieldset">
                    <div class="zform-control">
                        <div class="control-field">
                            <input type="password" class="field-text" placeholder="请输入用户名" data-required="true" data-descriptions="username">
                        </div>     
                    </div>
                    <div class="zform-control">
                        <div class="control-field">
                            <input type="password" id="pwd" class="field-text" placeholder="请输入密码" data-required="true" data-descriptions="password">
                        </div>     
                    </div>
                    <div class="zform-control">
                        <div class="control-field">
                            <input type="password" id="confirmpwd" class="field-text"  placeholder="再次输入密码确认" data-required="true" data-descriptions="confirmpassword" data-conditional="confirmpwd">
                        </div>
                    </div>
                    <div class="zform-control">
                        <div class="control-field">
                            <input type="text" class="field-text" placeholder="请输入手机号码" data-validate="phone" data-describedby="phone-description">
                        </div>
                    </div>
                    <div class="zform-control">
                        <div class="control-field">
                            <input type="text" class="field-text" placeholder="请输入年龄" data-pattern="^[0-9]+$"  data-required="true" data-descriptions="age">
                        </div>
                    </div>               
                    <div class="zform-control">
                        <div class="control-field">
                            <select class="field-select" data-required="true" data-descriptions="address" >
                                <option value="" selected disabled>请选择地址</option>
                                <option value="1">浙江省</option>
                                <option value="2">海南省</option>
                            </select>
                        </div>        
                    </div>
                    <div class="zform-control">
                        <label class="control-label control-label-area">个人简介：</label>
                        <div class="control-field">
                            <textarea class="field-area" rows="4" data-required="true" data-descriptions="intro" ></textarea>
                        </div>
                    </div>
                    <div class="zform-control zform-control-radiocheck">
                        <label class="control-label">兴趣爱好：</label>
                        <div class="control-field">
                            <label>
                                <input type="checkbox"  name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite">篮球
                            </label>    
                            <label>
                                <input type="checkbox" name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite">足球
                            </label>    
                            <label>
                                <input type="checkbox" name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite">排球
                            </label>
                            <label>
                                <input type="checkbox" name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite">乒乓球
                            </label>    
                        </div>
                    </div>
                    <div class="zform-control zform-control-radiocheck">
                        <label class="control-label">性别：</label>
                        <div class="control-field">
                            <label>
                                <input type="radio" name="sex" class="field-radio  zicon" data-required="true"  data-descriptions="sex">男
                            </label>    
                            <label>
                                <input type="radio"  name="sex" class="field-radio  zicon" data-required="true" data-descriptions="sex">女
                            </label>    
                        </div>
                    </div>
                </fieldset>
                <input type="submit" value="提交" class="zbtn zbtn-primary zbtn-full zbtn-lg">    
        </form>
    </div>
    <div class="demo-hd-1 ml10 mr10">验证类型2</div>
    <div class="zui-mr10 zui-mb10 zui-ml10 demo-bgfff pd10">
        <form class="zform zform-radius" action="https://www.baidu.com" id="form2">
                <fieldset class="zform-fieldset">
                    <div class="zform-control">
                        <div class="control-field">
                            <input type="password" class="field-text" placeholder="请输入用户名" data-required="true" data-descriptions="username" data-describedby="username-description">
                        </div>
                        <div id="username-description"></div>     
                    </div>
                    <div class="zform-control">
                        <div class="control-field">
                            <input type="password" id="pwd2" class="field-text" placeholder="请输入密码" data-required="true" data-descriptions="password" data-describedby="password-description"  data-conditional="pwd2">
                        </div> 
                        <div id="password-description"></div>    
                    </div>
                    <div class="zform-control">
                        <div class="control-field">
                            <input type="password" id="confirmpwd2" class="field-text"  placeholder="再次输入密码确认" data-required="true" data-descriptions="confirmpassword" data-conditional="confirmpwd2" data-describedby="confirmpassword-description">
                        </div>
                        <div id="confirmpassword-description"></div>
                    </div>
                    <div class="zform-control">
                        <div class="control-field">
                            <input type="text" class="field-text" placeholder="请输入手机号码" data-validate="phone" data-describedby="phone-description">
                        </div>
                        <div id="phone-description"></div>
                    </div>
                    <div class="zform-control">
                        <div class="control-field">
                            <input type="text" class="field-text" placeholder="请输入年龄" data-pattern="^[0-9]+$"  data-required="true" data-descriptions="age" data-describedby="age-description">
                        </div>
                        <div id="age-description"></div>
                    </div>
                    <div class="zform-control">
                        <div class="control-field">
                            <select class="field-select" data-required="true" data-descriptions="address" data-describedby="address-description" placeholder="请选择省事">
                                <option value="" selected disabled>请选择地址</option>
                                <option value="1">浙江省</option>
                                <option value="2">海南省</option>
                            </select>
                        </div>
                        <div id="address-description"></div>
                    </div>
                    <div class="zform-control">
                        
                        <div class="control-field">
                            <textarea class="field-area" placeholder="个人简介" rows="4" data-required="true" data-descriptions="intro" data-describedby="intro-description"></textarea>
                        </div>
                        <div id="intro-description"></div>
                    </div>
                    <div class="zform-control zform-control-radiocheck">
                        <label class="control-label">兴趣爱好：</label>
                        <div class="control-field">
                            <label>
                                <input type="checkbox"  name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite" data-describedby="favourite-description">篮球
                            </label>    
                            <label>
                                <input type="checkbox" name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite" data-describedby="favourite-description">足球
                            </label>    
                            <label>
                                <input type="checkbox" name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite" data-describedby="favourite-description">排球
                            </label>
                            <label>
                                <input type="checkbox" name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite" data-describedby="favourite-description">乒乓球
                            </label>    
                        </div>
                        <div id="favourite-description"></div>
                    </div>
                    <div class="zform-control zform-control-radiocheck">
                        <label class="control-label">性别：</label>
                        <div class="control-field">
                            <label>
                                <input type="radio" name="sex" class="field-radio  zicon" data-required="true"  data-descriptions="sex" data-describedby="sex-description">男
                            </label>    
                            <label>
                                <input type="radio"  name="sex" class="field-radio  zicon" data-required="true" data-descriptions="sex" data-describedby="sex-description">女
                            </label>    
                        </div>
                        <div id="sex-description"></div>
                    </div>
                </fieldset>
                <input type="submit" value="提交" class="zbtn zbtn-primary zbtn-full zbtn-lg">   
        </form>
    </div>

    <div class="pl10 pr10 mb20 pb20 align-c"><a href="http://wnworld.com/mobilevalidate" target="_blank" class="zbtn zbtn-primary  zbtn-lg mb20">查看文档</a></div>
    <script type="text/javascript">
   $(function(){
        $.mvalidateExtend({
            phone:{
                required : true,   
                pattern : /^0?1[3|4|5|8][0-9]\d{8}$/,
                each:function(){
                   
                },
                descriptions:{
                    required : '<div class="field-invalidmsg">请输入手机号码</div>',
                    pattern : '<div class="field-invalidmsg">您输入的手机号码格式不正确</div>',
                    valid : '<div class="field-validmsg">正确</div>'
                }
            }
        });
        $("#form1").mvalidate({
            type:1,
            onKeyup:true,
            sendForm:true,
            firstInvalidFocus:false,
            valid:function(event,options){
                //点击提交按钮时,表单通过验证触发函数
                alert("验证通过！接下来可以做你想做的事情啦！");
                 event.preventDefault();
            },
            invalid:function(event, status, options){
                //点击提交按钮时,表单未通过验证触发函数
            },
            eachField:function(event,status,options){
                //点击提交按钮时,表单每个输入域触发这个函数 this 执向当前表单输入域，是jquery对象
            },
            eachValidField:function(val){},
            eachInvalidField:function(event, status, options){},
            conditional:{
                confirmpwd:function(){
                    return $("#pwd").val()==$("#confirmpwd").val();
                }
            },
            descriptions:{
                username:{
                    required : '请输入用户名'
                },
                age : {
                    required : '请输入年龄',
                    pattern : '你输入的年龄格式不正确'
                },
                password:{
                     required : '请输入密码'
                },
                confirmpassword:{
                    required : '请再次输入密码',
                    conditional : '两次密码不一样'
                },
                address:{
                    required : '请选择地址'
                },
                intro:{
                    required : '请输入个人介绍'
                },
                favourite:{
                    required : '请选择个人爱好'
                },
                sex:{
                    required : '请选择性别'
                }
            }
        });
        $("#form2").mvalidate({
            type:2,
            onKeyup:true,
            sendForm:true,
            firstInvalidFocus:true,
            valid:function(event,options){
                //点击提交按钮时,表单通过验证触发函数
                alert("验证通过！接下来可以做你想做的事情啦！");
                event.preventDefault();
            },
            invalid:function(event, status, options){
                //点击提交按钮时,表单未通过验证触发函数
            },
            eachField:function(event,status,options){
                //点击提交按钮时,表单每个输入域触发这个函数 this 执向当前表单输入域，是jquery对象
            },
            eachValidField:function(val){},
            eachInvalidField:function(event, status, options){},
            conditional:{
                pwd2:function(val,options){
                    $("#confirmpwd2").trigger("keyup."+options.namespace);
                    return true;
                },
                confirmpwd2:function(val){
                    var flag;
                    return (val==$("#pwd2").val()) ? true :false; 
                },
            },
            descriptions:{
                username:{
                    required : '<div class="field-invalidmsg">请输入用户名</div>',
                    valid : '<div class="field-validmsg">验证通过</div>'
                },
                age : {
                    required : '<div class="field-invalidmsg">请输入年龄</div>',
                    pattern : '<div class="field-invalidmsg">你输入的格式不正确</div>',
                    valid : '<div class="field-validmsg">验证通过</div>'
                },
                password:{
                     required : '<div class="field-invalidmsg">请输入密码</div>',
                     conditional : '<div class="field-validmsg">验证通过</div>',
                     valid : '<div class="field-validmsg">验证通过</div>'
                },
                confirmpassword:{
                    required : '<div class="field-invalidmsg">请再次输入密码</div>',
                    conditional : '<div class="field-invalidmsg">两次密码不一样</div>',
                    valid : '<div class="field-validmsg">验证通过</div>'
                },
                address:{
                    required : '<div class="field-invalidmsg">请选择地址</div>',
                    valid : '<div class="field-validmsg">验证通过</div>'
                },
                intro:{
                    required : '<div class="field-invalidmsg">请输入个人介绍</div>',
                    valid : '<div class="field-validmsg">验证通过</div>'
                },
                favourite:{
                    required : '<div class="field-invalidmsg">请选择个人爱好</div>',
                    valid : '<div class="field-validmsg">验证通过</div>'
                },
                sex:{
                    required : '<div class="field-invalidmsg">请输入性别</div>',
                    valid : '<div class="field-validmsg">验证通过</div>'
                }
            }
        });
   })
</script>
</body>
</html>
Status API Training Shop Blog About
© 2016 GitHub, Inc. Terms Privacy Security Contact Help